<template>
	<view class="container">
        <!-- <view class="status_bar"></view> -->
		<view class="login-logo flex-col">
            <image src="../../static/images/mi_logo.jpg" mode=""></image>
            <text>小米账号登录</text>
        </view>
        <view class="input-container">
            <view class="input-wrapper mobile">
                <input type="text" value="" placeholder-class="placeholder-class" placeholder="手机号码"/>
            </view>
            <view class="input-wrapper code flex-row">
                <input type="text" value="" placeholder-class="placeholder-class" placeholder="短信验证码" />
                <text>获取验证码</text>
            </view>
        </view>
        <view class="btn bg flex-center">立即登录/注册</view>
        <view class="btn flex-center">用户名密码登录</view>
        <view style="padding-top: 38rpx;color: #9b9b9b;text-align: center;">收不到验证码?</view>
        <view class="other">
            <view class="title"><text>其它方式登录</text></view>
            <view class="list flex-center">
                <image src="../../static/images/wechat.png" mode=""></image>
            </view>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="stylus" scoped>
    .container
        padding 0 40rpx
        .login-logo
            padding-top 60rpx
            padding-bottom 16rpx
            image
                width 96rpx
                height 96rpx
                padding-bottom 30rpx
            text
                color #000000
                font-size 36rpx
        .input-container
            font-size 34rpx
            .placeholder-class
                font-size 36rpx
                color #9b9b9b
            .input-wrapper
                height 108rpx
                border-bottom: 2rpx solid #d3d3d3
                input
                    width 100%
                    height 100%
            .mobile
                padding-left 128rpx
                position relative
                &:before
                    content "+86"
                    position absolute
                    left 10rpx
                    top 50%
                    transform translateY(-50%)
                    color #9b9b9b
            .code
                input
                    flex 1
                text
                    width 140rpx
                    padding 0 40rpx
                    color #2ea5e5
                    font-size 28rpx
        .btn
            height 88rpx
            margin-top 48rpx
            font-size: 36rpx;
            cursor: pointer;
            border-radius: 12rpx;
            overflow: hidden;
            border 2rpx solid #d3d3d3;
            &.bg
                color: #fff;
                background-color: #ff6700;
                border 0
        .other
            padding-top 80rpx
            .title
                padding-bottom 30rpx
                text-align center
                color #b0b0b0
                text
                    position relative
                    &:before,&:after
                        content: "";
                        position: absolute;
                        top: 50%;
                        width: 100%;
                        border-top: 2rpx solid #f2f2f2;
                    &:before
                        left: 0;
                        transform: translate(-110%, -50%)
                    &:after
                        right: 0;
                        transform: translate(110%, -50%)
            .list
                image
                    width 90rpx
                    height 90rpx
                    border-radius 50%
</style>
